<template>
  <div>
    <ekDesc title="仓库信息" desc="仓库信息是指用户需要邮寄的物品的目的地，包括姓名、手机号、邮编、地址等，仓库可以绑定一个计费方案。" @click="handleClick" /> 
    <div class="ek-form mt-8" v-loading="loading">
      <el-form
        :model="form"
        :rules="rules"
        label-width="160px"
        ref="formRef"
        :disabled="disabled"
        v-if="!loading"
      >
     
        <el-form-item prop="store_name" label="收货人姓名">
          <ekInput v-model="form.store_name" :disabled="rowId ? true : false" />
        
        </el-form-item>
        <el-form-item prop="store_phone" label="收货人手机">
          <ekInput v-model="form.store_phone" />
        </el-form-item>
         <el-form-item prop="store_code" label="邮编">
          <ekInput v-model="form.store_code" />
        </el-form-item>
        <el-form-item prop="store_address" label="仓库地址">
          <ekTextarea v-model="form.store_address" />
        </el-form-item>
        <el-form-item prop="quotation_id" label="计费方案">
          <ekSelectModel
            v-model="form.quotation_id"
            :name="detail.quotation_id_model_text"
            :mapping="{
              label: ['quotation_name'],
              value: 'id',
            }"
            modelCode="MODEL_QUOTATION"
          />
        </el-form-item>
         <el-form-item  label="">
           <el-button type="primary" @click="save()" :loading="saveLoading" v-if="hasPermission('BTN_STORE_SAVE')">保存</el-button>

        </el-form-item>

      </el-form>
 
    </div>
</div>
</template>

<script setup>
import {
  getCurrentInstance,
  reactive,
  ref,
} from "vue";

import ekInput from "@/components/form/ekInput/index.vue";
import ekTextarea from "@/components/form/ekTextarea/index.vue";
import ekSelectModel from "@/components/form/ekSelectModel/index.vue";
import ekDesc from "@/components/business/ekDesc/index.vue";

import { objectAssignment } from "@/utils/common.js";
import { hasPermission  } from "@/utils/sys.js"
const {
  appContext: {
    config: { globalProperties },
  },
} = getCurrentInstance();
const { $storage, $http, $ekLoading, $ekMessage } = globalProperties;

const saveLoading = ref(false)
function save() {
  formRef.value.validate((valid) => {
    if (valid) {
      saveLoading.value = true
      $http
        .request({
          url: 'business/store/save?authCode=BTN_STORE_SAVE',
          method:"POST",
          data: {
            ...form.value,
          },
        })
        .then((res) => {
          $ekMessage.success(res.message);
        })
        .finally(() => {
             saveLoading.value = false
        });
    }
  });
}
const loading = ref(true);
let formRef = ref(null);
let form = ref({
  store_name: "",
   store_phone: "",
    store_address: "",
    store_code:"",
    quotation_id:""
});
let rules = reactive({
  store_name: [{ required: true, message: "请输入收货人姓名", trigger: "blur" }],
  store_phone: [{ required: true, message: "请输入收货人手机", trigger: "blur" }],
  store_address: [{ required: true, message: "请输入仓库地址", trigger: "blur" }],
  // store_code: [{ required: true, message: "请输入邮编", trigger: "blur" }],
  quotation_id: [{ required: true, message: "请选择计价方案", trigger: "blur" }],
});
const detail = ref({
  quotation_id_model_text: ''
});

const handleClick = () => {
  window.open(process.env.DOCS_URL+'src/guide/order/store/record/','_blank');
}
// 初始化表单
async function init() {
  loading.value = true;
    $http
      .get('/business/store/detail?authCode=BTN_STORE_DETAIL&modelCode=MODEL_STORE')
      .then((res) => {
        if (Object.keys(res.data).length) {
          detail.value = {
            ...detail.value,
            ...res.data,
          };
          objectAssignment(form.value, res.data);
        }
        loading.value = false;
      });
}
init();


</script>

<style scoped lang="scss">
.ek-form {
  padding: 20px;
  background-color: #fff;

  .ek-input,
  .ek-select,
  .ek-date-picker,
  .ek-select-tree,
  .ek-select-table,
  .ek-textarea {
    // width: 220px;
    width: 100%;
  }
  .ek-editor{
    width: 100%;
  }
  .ek-select {
    :deep(.el-select) {
      width: 100%;
    }
  }

}
</style>
